/* flex 布局动画兼容封装 */
.flex {
display: box;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-center {
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
}
.align-center {
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
}
.space-between {
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
}
.space-around {
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
-ms-justify-content: space-around;
-o-justify-content: space-around;
justify-content: space-around;
}
.flex-start {
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
-o-justify-content: flex-start;
justify-content: flex-start;
}
.flex-end {
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
-o-justify-content: flex-end;
justify-content: flex-end;
}
.flex-inherit {
-webkit-justify-content: inherit;
-moz-justify-content: inherit;
-ms-justify-content: inherit;
-o-justify-content: inherit;
justify-content: inherit;
}
.flex-initial {
-webkit-justify-content: initial;
-moz-justify-content: initial;
-ms-justify-content: initial;
-o-justify-content: initial;
justify-content: initial;
}
.align-start {
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
}
.align-end {
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
-o-align-items: flex-end;
align-items: flex-end;
}
.align-stretch {
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch;
}
.align-initial {
-webkit-align-items: initial;
-moz-align-items: initial;
-ms-align-items: initial;
-o-align-items: initial;
align-items: initial;
}
.align-inherit {
-webkit-align-items: inherit;
-moz-align-items: inherit;
-ms-align-items: inherit;
-o-align-items: inherit;
align-items: inherit;
}
.btn-center{
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
}
/* 开启GPU加速 */
.cube {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    /* Other transform properties here */
}
/* 放大动画 */
@keyframes fangda{
    0%{
    transform: scale(0.01);
    }
    100%{
    transform: scale(1);
    }
}
@-webkit-keyframes fangda{
    0%{
       transform: scale(0.01);
       -webkit-transform: scale(0.01);
    }
    100%{
       transform: scale(1);
       -webkit-transform: scale(1);
    }
}
/* 缩小动画 */
@keyframes suoxiao{
    0%{
    transform: scale(1);
    }
    100%{
    transform: scale(0.01);
    }
}
@-webkit-keyframes suoxiao{
    0%{
    transform: scale(1);
    }
    100%{
    transform: scale(0.01);
    }
}
/* 旋转动画 */
@keyframes  rotate{
    0%{
    transform: rotate(0deg);
    }
    25%{
    transform: rotate(180deg);
    }
    100%{
    transform: rotate(360deg);
    }
}
@-webkit-keyframes rotate{
    0%{
    transform: rotate(0deg);
    }
    25%{
    transform: rotate(180deg);
    }
    100%{
    transform: rotate(360deg);
    }
}
/* 按钮点击遮罩层动画 */
@keyframes scrd{
    0%{
        transform: scale(0);
    }
    50%{
        transform: scale(25);
    }
    100%{
        transform: scale(50);
    }
}
@-webkit-keyframes scrd{
    0%{
        transform: scale(0);
    }
    50%{
        transform: scale(25);
    }
    100%{
        transform: scale(50);
    }
}